<template>
  <div class="navBar" :class="{ isBgWhite, isAnimation, isHome }">
    <div class="left">
      <div class="logo">
        <img src="@/assets/images/home/logo.png" alt="" />
      </div>
      <ul>
        <li :class="Router == 'home' ? 'active' : ''">
          <router-link to="/" @click.native="changeRouter('home')"
            >首页</router-link
          >
        </li>
        <li :class="Router == 'pet' ? 'active' : ''">
          <router-link to="/pet" @click.native="changeRouter('pet')"
            >领养宠物</router-link
          >
        </li>
        <li :class="Router == 'news' ? 'active' : ''">
          <router-link to="/news" @click.native="changeRouter('news')"
            >宠物资讯</router-link
          >
        </li>
        <li :class="Router == 'product' ? 'active' : ''">
          <router-link to="/product" @click.native="changeRouter('product')"
            >产品中心</router-link
          >
        </li>
        <li><router-link to="#">招贤纳士</router-link></li>
        <li><router-link to="#">联系我们</router-link></li>
      </ul>
    </div>
    <div class="right">
      <div class="list">
        <i class="sreach iconfont icon-chaxun" @click="clickSreach(true)"></i>
        <i
          class="cart iconfont icon-gouwuche1"
          ref="iconCart"
          @mouseenter="cartHideEnter"
          @mouseleave="cartHideLeave"
        >
          <span>4</span>
          <!-- 隐藏购物车 -->
          <div class="cart_conten">
            <ul>
              <!-- 遍历地方 -->
              <li v-for="item in 2" :key="item">
                <div class="bg">
                  <img
                    src="http://v.bootstrapmb.com/2021/11/plb8511555/img/product/shop_item01.jpg"
                    alt=""
                  />
                </div>
                <div class="message">
                  <div class="title">
                    <router-link to="#">毛织狗玩具全棉</router-link>
                  </div>
                  <div class="number">
                    <i class="iconfont icon-chahao"></i>2
                  </div>
                  <div class="price">
                    <span>￥229.00</span>
                    <span>￥249.00</span>
                  </div>
                </div>
                <i class="iconfont icon-shanchu"></i>
              </li>
            </ul>
            <div class="total">
              <div class="price">
                <span>总价<i class="iconfont icon-a-maohao3x"></i></span>
                <span>￥4399.00</span>
              </div>
              <div class="button">前往购物车</div>
              <div class="button">立即支付</div>
            </div>
          </div>
        </i>
        <i class="user iconfont icon-yonghu"></i>
      </div>
      <div class="sreach_conten" :class="{ active: isSreach }">
        <div class="top">
          <span>你想要找什么？</span>
          <i class="iconfont icon-cha" @click="clickSreach(false)"></i>
        </div>
        <div class="bottom">
          <input type="text" placeholder="搜索标题或内容..." />
          <i class="iconfont icon-chaxun"></i>
        </div>
      </div>
      <div class="modal" :class="{ active: isSreach }"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "navBar",
  data() {
    return {
      isSreach: "",
      isBgWhite: false,
      isAnimation: false,
      isHome: true,
      Router: "home", // 当前路由高亮
    };
  },

  mounted() {
    window.addEventListener("scroll", this.ScrollTimer);
  },
  methods: {
    // 搜索按钮
    clickSreach(state) {
      if (state) {
        this.isCloseModal = true;
      }
      this.isSreach = state;
    },
    // 购物车按钮事件
    cartHideEnter() {
      this.cartTime = true;
      this.$refs.iconCart.style.overflow = "visible";
    },
    cartHideLeave() {
      this.cartTime = false;
      setTimeout(() => {
        if (this.cartTime) return;
        this.$refs.iconCart.style.overflow = "hidden";
        this.cartTime = false;
      }, 600);
    },
    ScrollTimer() {
      let top = (window.scrollY = document.documentElement.scrollTop);
      top = parseInt(top);
      if (top > 90) {
        this.isBgWhite = true;
        setTimeout(() => {
          this.isAnimation = true;
        }, 200);
      } else {
        this.isBgWhite = false;
        this.isAnimation = false;
      }
    },
    changeRouter(path) {
      this.Router = path;
    },
  },
};
</script>

<style lang="less" scoped>
.isHome {
  background-color: transparent !important;
}
.isBgWhite {
  position: fixed !important;
  top: 0;
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
  background-color: #fff !important;
  opacity: 0;
  width: 100vw;
}
.isAnimation {
  opacity: 1;
  transition: opacity 1s;
}
.navBar {
  min-width: 1200px;
  z-index: 99;
  top: 0;
  left: 0;
  position: relative;
  z-index: 99;
  height: 60px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  .left {
    display: flex;
    height: 60px;
    align-items: center;
    .logo {
      height: 20px;
      display: flex;
      padding: 0 20px;
      padding-left: 60px;

      img {
        height: 100%;
      }
    }
    ul {
      display: flex;
      li {
        padding: 6px 0;
        margin: 0 4px;
        margin-left: 2px;
        &.active {
          // font-weight: bold;
          color: #000;
          border-bottom: 2px solid rgb(0, 0, 0);
        }
        a {
          display: block;
          width: 100%;
          height: 100%;
          color: #000;
          text-decoration: none;
          padding: 6px 8px;
          box-sizing: border-box;
        }
      }
    }
  }
  .right {
    position: relative;
    .list {
      display: flex;
      align-items: center;
      margin-right: 40px;
      height: 100%;
      > i {
        font-size: 22px;
        margin: 0 5px;
        padding: 2px;
        cursor: pointer;
        color: #333;
        &.sreach {
        }
        // 购物车隐藏层
        &.cart {
          font-size: 26px;
          position: relative;
          padding: 6px;
          // background-color: #ccc;
          > span {
            font-size: 12px;
            color: #fff;
            background-color: #f04336;
            position: absolute;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            line-height: 14px;
            text-align: center;
            right: -0px;
            top: -0%;
          }
          // h5动画
          &:hover {
            overflow: visible;
          }
          &:hover .cart_conten {
            opacity: 1;
            transform: translateY(0);
          }
          overflow: hidden;
          .cart_conten {
            cursor: auto;
            transition: all 0.5s;
            opacity: 0;
            transform: translateY(8px);
            &::before {
              content: "";
              width: 100%;
              height: 26px;
              display: block;
              position: absolute;
              top: -26px;
              left: 0;
              // background-color: #ccc;
            }
            width: 326px;
            background-color: #fff;
            position: absolute;
            right: 0;
            top: 60px;
            box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
            ul {
              margin: 18px;
              padding-bottom: 20px;
              border-bottom: 1px solid #ccc;
              li {
                margin-bottom: 14px;
                display: flex;
                box-sizing: border-box;
                &:last-child {
                  margin-bottom: 0;
                }
                .bg {
                  flex-basis: 90px;
                  height: 90px;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
                .message {
                  flex: 1;
                  padding: 0 10px;
                  box-sizing: border-box;
                  .title {
                    height: 42px;
                    a {
                      color: #444;
                      font-weight: bold;
                      line-height: 1.4;
                      text-decoration: none;
                      font-size: 16px;
                      overflow: hidden;
                      display: -webkit-box;
                      -webkit-line-clamp: 2;
                      -webkit-box-orient: vertical;
                      transition: all 0.4s;
                      &:hover {
                        color: #f04336;
                      }
                    }
                  }
                  .number {
                    margin-top: 4px;
                    color: #676666;
                    font-size: 16px;
                    i {
                      font-size: 12px;
                      font-weight: bold;
                      color: #676666;
                    }
                  }
                  .price {
                    font-size: 16px;
                    padding-top: 8px;
                    span {
                      color: #676666;
                      &:first-child {
                        font-size: 16px;
                        font-weight: bold;
                        padding-right: 10px;
                      }
                      &:last-child {
                        color: #ccc;
                        font-size: 14px;
                        // font-weight: bold;
                        text-decoration: line-through;
                      }
                    }
                  }
                }
                > i {
                  cursor: pointer;
                  margin: 36px 10px 40px 10px;
                  font-size: 20px;
                  transition: all 0.4s;
                  &:hover {
                    color: #f04336;
                  }
                }
              }
            }
            .total {
              padding: 0 14px;
              .price {
                display: flex;
                justify-content: space-between;
                padding-bottom: 10px;
                span {
                  font-size: 18px;
                  font-weight: bold;
                  color: #333;
                  &:first-child {
                    position: relative;
                    i {
                      position: absolute;
                      font-size: 24px;
                      right: -18px;
                      top: -2px;
                    }
                  }
                }
              }
              .button {
                cursor: pointer;
                width: 100%;
                height: 50px;
                background-color: #f04336;
                margin-top: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 14px;
                font-weight: bold;
                letter-spacing: 2px;
                &:last-child {
                  margin-bottom: 20px;
                  background-color: #000;
                }
              }
            }
          }
        }
      }
    }
    .sreach_conten {
      width: 100%;
      height: 180px;
      padding: 20px 60px;
      box-sizing: border-box;
      background-color: #fff;
      position: fixed;
      top: -180px;
      left: 0;
      z-index: 99;
      // display: none;
      transition: top 0.4s;
      &.active {
        top: 0;
      }
      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        // background-color: #ccc;
        span {
          font-size: 20px;
          font-weight: bold;
        }
        i {
          font-size: 18px;
          cursor: pointer;
          padding: 10px;
          color: #999;
        }
      }
      .bottom {
        margin-top: 16px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        input {
          flex: 1;
          border: none;
          list-style: none;
          outline: none;
          color: #666;
        }
        i {
          color: #999;
          cursor: pointer;
          font-size: 26px;
          padding: 10px;
          margin-right: -6px;
        }
      }
    }

    .modal {
      display: none;
      top: 0;
      left: 0;
      position: fixed;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.6);
      opacity: 0.5;
      transition: opacity 0.4s;
      &.active {
        opacity: 1;
        display: block;
      }
    }
  }
}
</style>